/**
 * ES6创建类的方式(面向对象)
 * div相关效果
 */
//全局变量去接收一下this
var _this;
class DivUtils{
	/**
	 * @param {按钮伪数组} clazz
	 * @param {盒子ID} id
	 * 因为constructor里面设置的是类的公共属性（clazz,id）
	 * 
	 */
	constructor(clazz,id) {
		_this = this;
		//也对开关灯进行初始化赋值
		this.flag = false;
	    //对值进行赋值
		this.clazz = document.getElementsByClassName(clazz);
		//console.log(this.clazz);//Object { clazz: HTMLCollection }
		this.box = document.getElementById(id);
		//对按钮事件进行初始化操作
		this.btnInit();
	}
	//按钮初始化方法,给伪数组button绑定点击事件
	btnInit(){
		//console.log('btn...');
		for(var i=0;i<this.clazz.length;i++){
			//console.log('索引::'+i);
 			/*this.clazz[i].onclick = function(){
				依据业务，不利于方法扩展
			} */
			//this.clazz[i] button对应的原生DOM
			this.clazz[i].onclick = this.moreEffect;
		}
	}
	//多个效果
	moreEffect(){
		console.log(this);//<button class="btn" type="1">
		//根据标签属性进行判断
		console.log(this.getAttribute('type'));
		var type = parseInt(this.getAttribute('type'));
		//给相关按钮添加背景色
		$(this).addClass('xs').siblings('button').removeClass('xs');
		switch(type){
			case 1:
				_this.showHide();
				break;
			case 2:
				//旋转
				_this.rotateXY();
				break;
			case 3:
				//随机变色
				_this.randColor();
				break;
			default:
				//
				break;
		}
	}
	//显示隐藏
	showHide(){
		console.log(this);//开关灯
		if(this.flag==false){
			//隐藏,需要把原生的DOM对象用$包裹
			$(this.box).stop().fadeOut('slow');
			this.flag = true;
		}else{
			//显示
			$(this.box).stop().fadeIn('slow');
			this.flag = false;
		}
	}
	//旋转
	rotateXY(){
		if(this.flag==false){
			//console.log('rote');
			$(this.box).toggleClass('cur');			
		}else{
			alert("box不见了")
		}
	}
	//随机变色
	randColor(){
		console.log('rand');
		var colors = ['red','blue','black','green','pink','orange','yellow'];
		var rand = this.getRandom(0,colors.length);
		$(this.box).css({'background':colors[rand]});
	}
	getRandom(min, max) {
	  return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值 
	}
	
}
